<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>斗兽棋</title>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app"></div>
    <div style="text-align: center">{{ AppName }} / {{AppVersion}}</div>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        line-height: 1.5;
      }

      header {
        background-color: #b58863;
        color: #fff;
        padding: 20px;
        text-align: center;
      }

      .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
      }

      .section {
        flex-basis: 30%;
        margin-bottom: 30px;
      }

      h2 {
        font-size: 24px;
        margin-top: 0;
      }

      p {
        font-size: 16px;
        margin-bottom: 0;
      }

      #box,
      #app {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background-size: cover;
      }

      #app1 {
        width: 742px;
        height: 954px;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        left: calc((100% - 106px * 7) / 2 + 5px);
      }

      .item {
        width: 106px;
        height: 106px;
        border: none;
        font-size: 20px;
        color: #fff;
      }

      th {
        text-align: center;
        background-color: #fddbb3;
      }

      th,
      td,
      th,
      #help {
        border: 2px solid #b58863;
        border-left-color: #fff;
        border-top-color: #fff;
        text-align: left;
        padding: 8px;
      }

      /** 图标盒子 */
      .lattice,
      .map,
      .archive {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 100px;
        margin: 1px;
        background-size: cover;
        border-style: solid;
        border-radius: 50%;
        border-width: 5px;
        font-size: 35px;
      }

      /** 标记 */
      .archive {
        margin: 0px;
        width: 100%;
        height: 100%;
        background-size: cover;
        border-style: none;
        border-radius: 0%;
        border-width: 0px;
      }

      /** 图标 */
      .latticebox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 82px;
        height: 82px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
      }

      .latticebox p {
        margin: 0;
      }

      /** 棋子颜色框 */
      .latticebox.蓝 {
        border-color: #47aaf6;
      }

      .latticebox.红 {
        border-color: rgb(197, 1, 1);
      }

      .latticebox.空 {
        border-color: #000;
      }

      .lattice.蓝 {
        border: #66ccff;
        background: -webkit-gradient(
          radial,
          50 50,
          36,
          50 50,
          50,
          from(#fff),
          to(#66ccff)
        );
      }

      .lattice.红 {
        border: #f00;
        background: -webkit-gradient(
          radial,
          50 50,
          36,
          50 50,
          50,
          from(#fff),
          to(#f00)
        );
      }

      .lattice.空 {
        border: #000;
        border-style: none;
      }

      /** 标记框图标 */
      .r_box {
        background-image: url('{{_res}}/html//img/r_box.png');
      }

      .b_box {
        background-image: url('{{_res}}/html/img/b_box.png');
      }

      /** 空白背景 */
      .map {
        padding: 2px;
        margin: 0px;
        border-width: 1px;
        border-radius: 0%;
        background-color: #fff;
        background-image: url('{{_res}}/html//草地{{草地颜色}}.png');
      }

      /** 洞穴 陷阱 */
      .穴,
      .井 {
        background-color: #ccc;
      }

      /** 小河背景 */
      .河 {
        background-image: url('{{_res}}/html//水.gif');
      }
    </style>

    <script>
      let app = document.getElementById('app')
      let app1 = document.getElementById('app1')
      let data_box = [] // 棋子数据
      let items = []

      let metadata = '{{metadata}}'
      metadata = metadata.replace(/&#34;/g, '"')
      metadata = JSON.parse(metadata)

      let num = '{{num}}'
      num = num.split(',')

      for (let key in metadata) {
        if (Object.hasOwnProperty.call(metadata, key)) {
          let el = metadata[key]
          // 特殊地形
          if (['穴', '河', '井'].includes(el.id)) {
            switch (el.id) {
              case '穴':
                if (el.name != '空') {
                  data_box.push(
                    `<div class="map"><div class="lattice ${el.archive}"><div class="archive ${el.ss}"><div class="latticebox ${el.archive}">${el.name}</div></div></div></div>`
                  )
                } else {
                  data_box.push(
                    `<div class="map"><div class="lattice 空"><div class="archive ${el.ss}"><div class="latticebox">洞穴</div></div></div></div>`
                  )
                }
                break
              case '井':
                if (el.name != '空') {
                  data_box.push(
                    `<div class="map"><div class="lattice ${el.archive}"><div class="archive ${el.ss}"><div class="latticebox ${el.archive}">${el.name}</div></div></div></div>`
                  )
                } else {
                  data_box.push(
                    `<div class="map"><div class="lattice 空"><div class="archive ${el.ss}"><div class="latticebox">陷阱</div></div></div></div>`
                  )
                }
                break
              case '河':
                if (el.name != '空') {
                  data_box.push(
                    `<div class="map 河"><div class="lattice ${el.archive}"><div class="archive ${el.ss}"><div class="latticebox ${el.archive}">${el.name}</div></div></div></div>`
                  )
                } else {
                  data_box.push(
                    `<div class="map 河"><div class="lattice ${el.archive}"><div class="archive ${el.ss}"></div></div></div>`
                  )
                }
                break
              default:
                break
            }
          } else {
            // 普通地形
            if (el.name == '空') {
              data_box.push(
                `<div class="map"><div class="archive ${el.ss}"></div></div>`
              )
            } else {
              data_box.push(
                `<div class="map"><div class="lattice ${el.archive}"><div class="archive ${el.ss}"><div class="latticebox ${el.archive}">${el.name}</div></div></div></div>`
              )
            }
          }
        }
      }
      for (let key in Object.keys(metadata)) {
        items.push(`<div class="item">${num[key]}</div>`)
      }
      app.innerHTML = data_box.join('')
      app1.innerHTML = items.join('')
    </script>
  </body>
</html>
